$wSize:100px;
$fSize:15px;
$fcolor:red;
$border: 1px solid bule;
.container{
    width: $wSize;
    height: 90px;
    color: $fcolor;
    font-size: $fSize;
    border:$border;
}
// 数字型
$bSize: 100px;
$bWidth:100;
// 字符串
$selectName:'box';
$selectName1:box1;
// 颜色
$bColor: #edfac4;
$bColor2: yellow;
$bColor3:rgba(255,244,233,0.5);

// 布尔型 true false
$isSelect: true;
$notSelect: false;
// 空-null
$nullValue: null;
// list-数组
$borderlight:1px solid light;
$family: "仿宋", "黑体", 'Arial';
// maps key-value键值对
$box:(w:100px,h:50px,color:red,size:15px);

// 1、全局变量与局部变量
    $g-width:100px; // 全局变量
    .box{
        width: $g-width;
        $b-height:100px;// 局部变量
        height:$b-height;
        $b-color:red !global; // 将局部变量转成全局变量
        color: $b-color;
    }
    .box1{
        width: $g-width;
        // height:$b-height;  // 这里是box的局部变量这里用了会报错
        color: $b-color; // 这里已经转为全局变量，所以可以用
    }
// 2、默认变量
$de-color:red;
$de-color:#666 !default;// 给未定义的变量一个默认值，如果变量已经定义则使用已经定义的值
// $de-color:bule;
$de-b-color:yellow !default;
.box2{
    color: $de-color;// $de-color如果没有定义则使用#666，此处已经定义则是red
    background-color: $de-b-color;
}
// 3、插值语句  #{$变量名称}把变量插入到选择器名或css属性名中
$in-name:'container';
$in-value:left;
// .box1-container{} 插入变量名
.box1-#{$in-name}{
    width: 100px;
    border-#{$in-value}: 1px solid red;
}
.box2-#{$in-name}{
    height: 100px;
    margin-#{$in-value}: 10px
}

// 4、多值变量-数组lists 更多的服务于循环与函数
$list-margin: 10px 10px 25px 3px;
$list-family: "仿宋", "黑体", 'Arial';
.box3{
    margin: $list-margin;
    font-family: $list-family;
}

// 5、多值变量-maps键值对 更多的服务于循环与函数
$mapsBox:(w:100px,color:#ff0,size:15px);
.box4{
    width: map-get($mapsBox,w);
    height: 100px;
    background-color:map-get($mapsBox,color);
    font-size: map-get($mapsBox,size);
}
